import { ChangeEvent, FC, useState, useEffect } from 'react'
import { useSearchParams, useNavigate, useLocation } from 'react-router-dom'
import { Input } from 'antd'
const { Search } = Input
const ListSearch: FC = () => {
  const [value, setValue] = useState('')
  const router = useNavigate()
  // 获取当前路径
  const { pathname } = useLocation()
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
  }
  const onSearch = (value: string) => {
    router({
      pathname,
      search: `?search=${value}`,
    })
    setValue(value)
  }
  const [searchParams] = useSearchParams()
  useEffect(() => {
    const newVal = searchParams.get('search') || ''
    setValue(newVal)
  }, [searchParams])
  return (
    <Search
      placeholder="请输入问卷标题"
      allowClear
      value={value}
      onSearch={onSearch}
      onChange={handleChange}
      style={{ width: 200 }}
    />
  )
}

export default ListSearch
